<template>
	<view class="">
		<view class="face">
			<view class="face_img">
				<block v-if="uploadTp">
					<image :src="avatar"></image>
				</block>
				<block v-else>
					<image :src="userinfo.avatar ? userinfo.avatar : '../../static/toux.jpg'"></image>
				</block>
				<!-- <view @tap="avatarImg">上传头像</view> -->
				<view class="updateImg" @tap="avatarImg">
					<image src="../../static/images/update.png" mode=""></image>
				</view>
			</view>
		</view>
	  <form @submit="formSubmit" @reset="formReset">
	  <view class="message_list">
	  	<view class="message_item flex_layout">
	  		<view class="left_name">昵称</view>
				<view class="flex_layout right_input">
					<input type="text" name='nickname' :value="userinfo.nickname" placeholder="请输入昵称" placeholder-style="color:#999" />
					<!-- <image src="../../static/images/right.png" mode=""></image> -->
				</view>
	  	</view>
			<view class="message_item flex_layout">
				<view class="left_name">姓名</view>
				<view class="flex_layout right_input">
					<input type="text" name='realname' :value="userinfo.realname" placeholder="请输入姓名" placeholder-style="color:#999" />
				</view>
			</view>
			<view class="message_item flex_layout">
				<view class="left_name">电话</view>
				<view class="flex_layout right_input">
					<input type="number" name='mobile' :value="userinfo.mobile" placeholder="请输入电话号码" placeholder-style="color:#999" />
					<!-- <image src="../../static/images/right.png" mode=""></image> -->
				</view>
			</view>
			<view class="message_item flex_layout">
				<view class="left_name">出生日期</view>
				<view class="flex_layout right_input">
					<picker mode="date" :value="date" name="date" fields="day" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="picker_view" :data-text="date" :class="date=='请选择出生日期'||date==null?'picker_color1':'picker_color2'">
						  {{date == null ? '请选择出生日期' : date}}
						</view>
					</picker>
					<image src="../../static/images/right.png" mode=""></image>
				</view>
			</view>
			
			<view class="message_item flex_layout">
				<view class="left_name">性别</view>
				<view class="flex_layout right_input">
					<radio-group class="flex_layout" name="sex" @change="radioChange">
						<label class="sexLabel flex_layout">
							<view>
								<radio value="0" style="transform:scale(0.7);" color="#2562a1"  v-if="userinfo.gender==0" :checked="true" />
								<radio value="0" style="transform:scale(0.7);" color="#2562a1"  v-else />
							</view>
							<view>男</view>
						</label>
						<label class="sexLabel flex_layout">
							<view>
								<radio value="1" style="transform:scale(0.7);" color="#2562a1" v-if="userinfo.gender==1" :checked="true" />
								<radio value="1" style="transform:scale(0.7);" color="#2562a1" v-else />
							</view>
							<view>女</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="message_item flex_layout">
				<view class="left_name">格言</view>
				<view class="flex_layout right_input">
					<input type="text" name='bio' :value="userinfo.bio" placeholder="请输入您的格言" placeholder-style="color:#999" />
					<!-- <image src="../../static/images/right.png" mode=""></image> -->
				</view>
			</view>
			
			<view class="submit_btn">
				<button class="btn-submit" formType="submit" type="primary">提交</button>
			</view>
			
			
	  </view>
	  </form>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				userinfo: this.$common.userInfo(),
				date: '请选择出生日期',
				avatar:'',
				uploadTp:false
			}
		},
		onLoad() {
			var userinfo=this.$common.userInfo();
			this.userinfo = userinfo
			this.date = userinfo.birthday
			if(this.date=='0000-00-00' || this.date==''){
				this.date='';
			}else{
				this.date=userinfo.birthday
			}
		},
		mounted() {
			_this= this;
		},
		onShow() {
			
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			avatarImg() {
				var that = this
				//上传头像
						that.$common.uploadImage(
						   {},
							uploadFileRes => {
								that.$common.normalToShow('上传成功,请点击保存')
									//拿到头像图片路径
									that.avatar=uploadFileRes
									that.uploadTp=true;
									console.log(that.avatar);
									
								}
								)
			},
			formSubmit: function(e) {
				var that=this;
				var value = e.detail.value
				var info = this.userinfo
				if (value.nickname == "") {
					uni.showToast({
						title: '昵称不能为空',
						duration: 1500,
						icon: "none"
					});
					return
				}
				if (value.nickname == info.nickname  && value.bio == info.bio && value.date == info.birthday && value.sex == info.sex) {
					uni.showToast({
						title: '未修改任何信息',
						duration: 1500,
						icon: "none"
					});
					return
				}
				
				this.$api.profile(
				  {'nickname':value.nickname,
					'birthday':this.date,
					'mobile':value.mobile,
					'realname':value.realname,
					'sex':value.sex,
					'bio':value.bio,
					'avatar':that.avatar?that.avatar:info.avatar},
					res => {
						//console.log(data)
						if (res.code == 1) {
							uni.setStorageSync('upload', 1);
							uni.showToast({
								title: res.msg,
								icon: "success",
								duration: 500
							})
							setTimeout((e => {
								uni.navigateBack();
							}), 1000);
							
						}
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
						}
					}
				)
			},
			userinfoIndex: function(){
				var data=[];
				this.$api.refreshUser(
				    {},
					res=> {
						console.log(res.data);
						uni.setStorageSync('user', res.data.user)
						setTimeout((e => {
							uni.navigateBack();
						}), 500);
					}
					)
			},
			
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				var date = new Date();
			
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
			
				return `${year}-${month}-${day}`;
			},
			submit:function(){
				uni.showToast({
					title:'修改成功',
					icon:'success'
				})
				setTimeout(function(){
					uni.navigateTo({
						url:"../index/index"
					})
				},1500)
				
			},
			birthDate: function(e){
				console.log(e);
				this.date=e.detail.value;
			},
			radioChange: function(e) {
				var sex=e.detail.value
				console.log("sex: ",sex);
				this.sex=sex
			}
			
		}
	}	
</script>

<style>
	@import url('../../common/common.css');
	page{background: #fff;}
	.flex_layout{display: flex; align-items: center; flex-wrap: wrap;}
	.message_item{padding: 50upx 30upx; border-bottom: 1px solid #f2f2f2;}
	.face {
		text-align: center;
		padding-top: 60upx;
	}
	
	.face_img{width: 150upx; height: 150upx; position: relative; overflow: hidden; border-radius: 50%; margin: 0 auto;}
	
	.face_img>image {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx
	}
	.updateImg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;}
	.updateImg image{width: 36upx; height: 30upx;}
	.message_item:last-child{border: none} 
	.left_name{width: 120upx; color: #333; font-size: 30upx;}
	.right_input{padding-left: 57upx; width: 570upx;}
	.right_input input{width: 500upx; padding-right: 30upx; box-sizing: border-box; color: #333; font-size: 30upx;}
	.right_input picker{width: 500upx; padding-right: 30upx; box-sizing: border-box; color: #333; font-size: 30upx;}
	.right_input image{width: 13upx; height: 23upx; display: block;}
	.right_input .pickerDate{color: #999; font-size: 30upx;}
	.right_input .active{color: #333;}
	.sexLabel{margin-right: 30upx;}
	.sexLabel view radio{margin-right: 10upx;}
	.submit_btn button{width: 540upx; height: 72upx; border-radius: 72upx; background: #2562a1; color: #fff; font-size: 36upx;}
	.picker_color1{color: #ccc; font-size: 30upx;}
	.picker_color2{color: #333; font-size: 30upx;}
</style>
